<template>
  <div class="home_page">
    <!-- <div class="tabbar">
      <div class="box">
        <div class="img">
          <van-icon name="wap-home-o"/>
        </div>
        <div class="p">系统功能</div>
      </div>
      <div class="box">
          <div class="img"><van-icon name="user-o" /></div>
        <div class="p">个人消息</div>
      </div>
    </div> -->

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="active = 0"
        >系统功能</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" @click="active = 1"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
    <div id="content" :class="active == 0 ? 'current' : ''">
      <Index />
    </div>
    <div id="content" :class="active == 1 ? 'current' : ''">
      <Personal />
    </div>

    <div class="lianxi">
      <van-icon name="comment-o" />
      <p>联系</p>
     
    </div>
  </div>
</template>

<script>
import Index from "../views/Index";
import Personal from "..//views/Personal";
export default {
  data() {
    return {
      active: 0,
    };
  },
  components: {
    Index,
    Personal,
  },
};
</script>
<style lang="less" scoped>
.home_page {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
}
#content {
  display: none;
}

#content.current {
  display: block;
}

.van-tabbar {
  height: 65px;
}

.lianxi{
  width: 60px;
  height: 60px;
 background-color: #ffcc33;
  border-radius: 50%;
  position: fixed;
  left: 160px;
  bottom: 20px;
  z-index: 99;
  .van-icon{
    font-size: 18px;
    margin-top: 10px; 
    margin-left: 20px;
    color: #fff;
  }
  p{
    margin-left: 18px;
    font-size: 12px;
    color: #fff;
  }
}

</style>